<template>
  <view class="login-container">
    <view class="login-form">
      <view class="form-title">手机验证码登录</view>
      
      <view class="form-item">
        <input 
          v-model="phoneNumber" 
          type="number" 
          placeholder="请输入手机号码" 
          maxlength="11"
          @input="validatePhone"
        />
      </view>
      
      <view class="form-item code-item">
        <input 
          v-model="verificationCode" 
          type="number" 
          placeholder="请输入验证码" 
          maxlength="6"
        />
        <button 
          class="send-code-btn" 
          :disabled="isCounting || !isPhoneValid"
          @click="sendVerificationCode"
        >
          {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
        </button>
      </view>
      
      <button 
        class="login-btn" 
        :disabled="!canLogin" 
        @click="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      verificationCode: '',
      isPhoneValid: false,
      isCounting: false,
      countdown: 0,
      timer: null
    }
  },
  computed: {
    canLogin() {
      return this.isPhoneValid && this.verificationCode.length === 6
    }
  },
  methods: {
    // 验证手机号格式
    validatePhone() {
      const reg = /^1[3-9]\d{9}$/
      this.isPhoneValid = reg.test(this.phoneNumber)
    },
    
    // 发送验证码
    sendVerificationCode() {
      if (!this.isPhoneValid) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      // 调用发送验证码API
      uni.request({
        url: 'https://your-api-domain.com/send-code',
        method: 'POST',
        data: {
          phone: this.phoneNumber
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: '验证码已发送',
              icon: 'success'
            })
            this.startCountdown()
          } else {
            uni.showToast({
              title: res.data.message || '验证码发送失败',
              icon: 'none'
            })
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          })
        }
      })
    },
    
    // 开始倒计时
    startCountdown() {
      this.isCounting = true
      this.countdown = 60
      
      this.timer = setInterval(() => {
        this.countdown--
        
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.isCounting = false
        }
      }, 1000)
    },
    
    // 处理登录
    handleLogin() {
      if (!this.canLogin) return
      
      uni.showLoading({
        title: '登录中...',
        mask: true
      })
      
      // 调用登录API
      uni.request({
        url: 'https://your-api-domain.com/login',
        method: 'POST',
        data: {
          phone: this.phoneNumber,
          code: this.verificationCode
        },
        success: (res) => {
          uni.hideLoading()
          
          if (res.data.code === 200) {
            // 登录成功处理
            uni.setStorageSync('token', res.data.token)
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            })
            
            // 跳转到首页或其他页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 1500)
          } else {
            uni.showToast({
              title: res.data.message || '登录失败',
              icon: 'none'
            })
          }
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          })
        }
      })
    }
  },
  
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 40rpx;
  height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 60rpx;
  text-align: center;
}

.form-item {
  margin-bottom: 40rpx;
  position: relative;
}

.form-item input {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 32rpx;
  width: 100%;
  padding-left: 10rpx;
}

.code-item {
  display: flex;
  align-items: center;
}

.code-item input {
  flex: 1;
}

.send-code-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 26rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 8rpx;
  margin-left: 20rpx;
  padding: 0;
}

.send-code-btn[disabled] {
  background-color: #ccc;
  color: #999;
}

.login-btn {
  margin-top: 60rpx;
  height: 90rpx;
  line-height: 90rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 45rpx;
  font-size: 32rpx;
}

.login-btn[disabled] {
  background-color: #ccc;
  color: #999;
}
</style>